<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
		<style>
			/* 相对定位，box2图片压到box1图片上 */
		div.box1{
			width: 250px;
			height: 250px;
			background: #ff525b;
			background: url(img/1.png);
			/*声明一个相对定位与方向属性*/
			position: absolute;
			left: 0;
			top: 0;
			/* 堆叠 z-index 针对所有的position定位 */
			z-index: 100;
		}	
		div.box2{
			width: 250px;
			height: 250px;
			background: #ffaaff;
			background: url(img/3.png);
			/*声明一个相对定位与方向属性*/
			position: absolute;
			left: 0;
			top: 0;
			z-index: 101;
		}
		</style>
	</head>
	<body>
		<!-- 定位：相对定位 相对于父元素定位
		          功能：单一元素定位，元素还在正常文档流中  推荐
			 position属性：relative;  声明元素可以用相对定位定义
			 方向属性：left、right、top、bottom
		     堆叠顺序属性：z-index
			              属性值数值，数值越大，越靠前	
				  绝对定位：按照定位祖先【页面左上角】进行定位
				  功能：脱离文档流，不占据原来的空间
				  方向属性和叠加属性和相对以及固定定位共用
				  position属性：absolute;声明元素可以使用绝对定位
				  
				  实际开发中：相对定位结合绝对定位一起使用
				             侧边栏、左栏【挂靠】、遮罩层【挂靠】
				  案例：左栏弹出【html结构，语义化标签+css两种定位+js】
							   
							   
		 -->
		 <div class="box1"></div>
		 <div class="box2"></div>
	</body>
</html>
<!-- 定位：相对定位--方向、叠加属性微调
          特点：不脱离文档流
		  绝对定位--方向、叠加属性
		  特点：脱离文档流
		  
		  固定定位--方向、叠加属性
 -->